<template>
    <div class="homePage">
        <a-row>
          <a-col :span="8">
            <a-card  title="基础折线图" :bordered="true" >
              <AkEcharts :option="{
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }]
                }" style="height: 300px"></AkEcharts>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card  title="基础平滑折线图" :bordered="true" >
              <AkEcharts :option=" {
                  xAxis: {
                      type: 'category',
                      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [{
                      data: [820, 932, 901, 934, 1290, 1330, 1320],
                      type: 'line',
                      smooth: true
                  }]
              }" style="height: 300px"></AkEcharts>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card  title="基础面积图" :bordered="true" >
              <AkEcharts :option="{
                  xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [{
                      data: [820, 932, 901, 934, 1290, 1330, 1320],
                      type: 'line',
                      areaStyle: {}
                  }]
              }" style="height: 300px"></AkEcharts>
            </a-card>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-card  title="基础柱状图" :bordered="true" >
              <AkEcharts :option=" {
                  xAxis: {
                      type: 'category',
                      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [{
                      data: [120, 200, 150, 80, 70, 110, 130],
                      type: 'bar'
                  }]
                }" style="height: 300px"></AkEcharts>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card  title="按行按列排布柱状图" :bordered="true" >
              <AkEcharts :option="{
                legend: {},
                tooltip: {},
                dataset: {
                    source: [
                        ['product', '2012', '2013', '2014', '2015'],
                        ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
                        ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
                        ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
                    ]
                },
                xAxis: [
                    {type: 'category', gridIndex: 0},
                    {type: 'category', gridIndex: 1}
                ],
                yAxis: [
                    {gridIndex: 0},
                    {gridIndex: 1}
                ],
                grid: [
                    {bottom: '55%'},
                    {top: '55%'}
                ],
                series: [
                    // These series are in the first grid.
                    {type: 'bar', seriesLayoutBy: 'row'},
                    {type: 'bar', seriesLayoutBy: 'row'},
                    {type: 'bar', seriesLayoutBy: 'row'},
                    // These series are in the second grid.
                    {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                    {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                    {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                    {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
                ]
            }" style="height: 300px"></AkEcharts>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card  title="简单数据集柱状图" :bordered="true" >
              <AkEcharts :option="{
                  legend: {},
                  tooltip: {},
                  dataset: {
                      source: [
                          ['product', '2015', '2016', '2017'],
                          ['Matcha Latte', 43.3, 85.8, 93.7],
                          ['Milk Tea', 83.1, 73.4, 55.1],
                          ['Cheese Cocoa', 86.4, 65.2, 82.5],
                          ['Walnut Brownie', 72.4, 53.9, 39.1]
                      ]
                  },
                  xAxis: {type: 'category'},
                  yAxis: {},
                  // Declare several bar series, each will be mapped
                  // to a column of dataset.source by default.
                  series: [
                      {type: 'bar'},
                      {type: 'bar'},
                      {type: 'bar'}
                  ]
              }" style="height: 300px"></AkEcharts>
            </a-card>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-card  title="环形图" :bordered="true" >
              <AkEcharts :option=" {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 1048, name: '搜索引擎'},
                            {value: 735, name: '直接访问'},
                            {value: 580, name: '邮件营销'},
                            {value: 484, name: '联盟广告'},
                            {value: 300, name: '视频广告'}
                        ]
                    }
                ]
            }" style="height: 300px"></AkEcharts>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card  title="K线图" :bordered="true" >
              <AkEcharts :option="{
                xAxis: {
                    data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
                },
                yAxis: {},
                series: [{
                    type: 'k',
                    data: [
                        [20, 34, 10,38],
                        [40, 35, 30, 50],
                        [31, 38, 33, 44],
                        [38, 15, 5, 42]
                    ]
                }]
            }" style="height: 300px"></AkEcharts>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card  title="仪表盘" :bordered="true" >
              <AkEcharts :option="{
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                series: [{
                    name: 'Pressure',
                    type: 'gauge',
                    detail: {
                        formatter: '{value}'
                    },
                    data: [{
                        value: 50,
                        name: 'SCORE'
                    }]
                }]
            }" style="height: 300px"></AkEcharts>
            </a-card>
          </a-col>
        </a-row>
        <div style="text-align:center">更多图表访问 <a href="https://echarts.apache.org/" target="_bank">echarts</a> </div>
    </div>
</template>

<script>


import AkEcharts from '../components/akfh/AkEcharts'
export default {
    name: "Index",
  components: { AkEcharts },
  mounted(){
    
  },
  methods:{
  },
  data(){
      return {
        
      }
  }
}
</script>
